<script setup lang="ts">
import { reactive, ref } from 'vue'

// 循环列表1
const list1 = ref([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' },
])
// 删除函数1
const removeItem1 = (id: number) => {
  // 通过filer删除
  // list.value = list.value.filter(item=> item.id !== id)

  // 使用findindex找到对应的索引
  const index = list1.value.findIndex((item) => item.id == id)
  // 通过splice删除
  list1.value.splice(index, 1)
}

// 循环列表2
const list2 = reactive([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' },
])
// 删除函数2
const removeItem2 = (id: number) => {
  // 通过filer删除
  // list.value = list.value.filter(item=> item.id !== id)

  // 使用findindex找到对应的索引
  const index = list2.findIndex((item) => item.id == id)
  // 通过splice删除
  list2.splice(index, 1)
}
</script>

<template>
  <div id="app">
    <h3>小黑的书架-ref</h3>
    <ul>
      <li v-for="(item, index) in list1" :key="index">
        <span>{{ item.name }}</span>
        <span>{{ item.author }}</span>
        <button @click="removeItem1(item.id)">删除</button>
      </li>
    </ul>

    <h3>小黑的书架-reactive</h3>
    <ul>
      <li v-for="(item, index) in list2" :key="index">
        <span>{{ item.name }}</span>
        <span>{{ item.author }}</span>
        <button @click="removeItem2(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<style></style>
